﻿@inherits Website.AppView<Website.Models.GameVo>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>游戏中</title>
    <style>
        #players > div {
            padding: 10px 0;
            border-bottom: solid 1px red;
        }
        #players>div>span {
            margin-left: 20px;
        }
        #players>div>label {
            display: inline-block;
            width: 100px;
        }
         fieldset > div > span {
             padding: 10px 5px;
             border-bottom: solid 1px #000;
             margin-right: 5px;
             cursor: pointer;
             width: 20px;
             display: inline-block;
             text-align: center
         }
            fieldset > div > span:hover {
                background-color: #ccc;
            }
    </style>
    <script src="/Content/jquery.min.js"></script>
    <script>
        function Game(gid) {
            var self = this;
            self.add = function (data) {

            };
            self.setPos = function(data) {

            };
            self.fapai = function (data) {

            };
            self.chupaier = function(data) {

            };
            self.chupai = function(data) {
                
            }
            self.ready = function () {
                $.post("/ready",
                    { gid: gid },
                    function (data) {
                        if (data.ex) {
                            alert(data.ex);
                        } else {
                            $("#btnReady").attr("disabled", "disabled");
                        }
                    });
            };
            self.dapai = function(pais,success) {
                $.post("/chupai?gid=" + gid,
                    { pais: pais.join(",") },
                    function(data) {
                        if (data.ex) {
                            alert(data.ex);
                        } else {
                            success();
                        }
                    });
            };
            self.yaobuqi = function() {
                $.post("/pass?gid=" + gid);
            }
            self.pass = function(data) {

            };
            self.win = function(data) {

            };
            self.count = function(data) {

            };
            var getcmd = function () {
                $.getJSON("/gaming?gid=" + gid,
                    function (data) {
                        if (data && data.length && data.length > 0) {
                            $.each(data,
                                function (i, n) {
                                    if (n.cmd === "fapai") {
                                        self.fapai(n.data);
                                    }else if (n.cmd === "add") {
                                        self.add(n.data);
                                    } else if (n.cmd === "chupaier") {
                                        self.chupaier(n.data);
                                    } else if (n.cmd === "setpos") {
                                        self.setPos(n.data);
                                    } else if (n.cmd === "chupai") {
                                        self.chupai(n.data);
                                    } else if (n.cmd === "pass") {
                                        self.pass(n.data);
                                    } else if (n.cmd === "win") {
                                        self.win(n.data);
                                    } else if (n.cmd === "count") {
                                        self.count(n.data);
                                    }
                                });
                        }
                        setTimeout(getcmd, 500);
                    });
            };
            self.get = function () {
                getcmd();
            }
            getcmd();
        }
    </script>
    <script>
        function numToText(num) {
            switch (num) {
            case 1:
                return "大";
            case 2:
                return "小";
            case 3:
                return "2";
            case 4:
                return "A";
            case 5:
                return "K";
            case 6:
                return "Q";
            case 7:
                return "J";
            case 8:
                return "10";
            case 9:
                return "9";
            case 10:
                return "8";
            case 11:
                return "7";
            case 12:
                return "6";
            case 13:
                return "5";
            case 14:
                return "4";
            case 15:
                return "3";
            }
            return "错误";
        }
        function removeByValue(arr, val) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] === val) {
                    arr.splice(i, 1);
                    break;
                }
            }
        }
    </script>
    <script>
        var gid = '@Model.Gid';
        var game = new Game(gid);
        var shoupai = [];
        var chupai = [];
        var players = [];

        function setShouPai() {
            $("#pais").html("");
            shoupai.sort(function (i, j) {
                return i - j;
            });
            $.each(shoupai,
                function (i, n) {
                    $("<span/>").text(numToText(n)).attr("num", n).appendTo("#pais");
                });
            $("#pais>span").off().click(function () {
                var btn = $(this);
                var num = parseInt(btn.attr("num"));
                if (btn.closest("fieldset").hasClass("chupai")) {
                    removeByValue(chupai, num);
                    shoupai.push(num);
                } else {
                    removeByValue(shoupai, num);
                    chupai.push(num);
                }
                setShouPai();
                setChuPai();
            });
        }

        function setChuPai() {
            $("#chupai").html("");
            chupai.sort(function (i, j) {
                return i - j;
            });
            $.each(chupai,
                function (i, n) {
                    $("<span/>").text(numToText(n)).attr("num", n).appendTo("#chupai");
                });
            $("#chupai>span").off().click(function () {
                var btn = $(this);
                var num = parseInt(btn.attr("num"));
                if (btn.closest("fieldset").hasClass("chupai")) {
                    removeByValue(chupai, num);
                    shoupai.push(num);
                } else {
                    removeByValue(shoupai, num);
                    chupai.push(num);
                }
                setShouPai();
                setChuPai();
            });
        }
        game.add = function (data) {
            $("<div/>").text(data + " 已加入").appendTo("#players");
        };
        game.setPos = function(data) {
            players = data;
            players.sort(function (i, j) {
                return i.index - j.index;
            });
            $("#players").html("");
            $.each(players,
                function(i, n) {
                    var div = $("<div/>").attr("index", n.index).appendTo("#players");
                    $("<label/>").text(n.name).attr("pname", n.name).appendTo(div);
                    $("<span/>").appendTo(div);
                });
        };
        game.fapai = function (data) {
            shoupai.push(data);
            setShouPai();
            $("#players span").text("");
        };
        game.chupaier = function(index) {
            $("#players>div").css({ "font-weight": "", "color": "" });
            $("#players>div[index=" + index + "]")
                .css({
                    "color": "red",
                    "font-weight": "bold"
                })
                .find("span")
                .text("出牌中...");
        };
        game.chupai = function(data) {
            var p = $("#players>div[index=" + data.index + "]");
            var text = "";
            $.each(data.pais,
                function(i, n) {
                    text += numToText(n) + "&nbsp;";
                });
            p.find("span").html(text);
        };
        game.pass = function(index) {
            $("#players>div[index=" + index + "]").find("span").text("要不起");
        };
        game.win = function (data) {
            var text = $("#players>div[index=" + data.index + "]>label").text() + "获胜";
            $.each(data.data,
                function(i, n) {
                    text += "\r\n" + $("#players>div[index=" + n.index + "]>label").text() + " 剩余：" + n.count;
                });
            alert(text);
            $("#btnReady").removeAttr("disabled");
            chupai = [];
            shoupai = [];
            setShouPai();
            setChuPai();
        };
        game.count = function(data) {
            $.each(data,
                function(i, n) {
                    var lbl = $("#players>div[index=" + n.index + "]>label");
                    lbl.text("[" + n.count + "] " + lbl.attr("pname"));
                });
        };
        $(function() {
            $("#btnReady").click(function() {
                game.ready();
            });
            $("#btnGet").click(function() {
                game.get();
            });
            $("#btnChupai").click(function() {
                var pais = $("#chupai>span");
                if (pais.length < 1) return;
                var items = [];
                pais.each(function(i,n) {
                    items.push(parseInt($(n).attr("num")));
                });
                game.dapai(items,
                    function() {
                        chupai = [];
                        setChuPai();
                    });
            });
            $("#btnPass").click(function() {
                game.yaobuqi();
            });
        });
    </script>
</head>
<body>
    <input id="btnReady" value="准备" type="button" />
    <input id="btnGet" value="下一步" type="button" />

    <div id="players" style="margin-top: 15px; border: solid 1px #ccc"></div>
    
<fieldset class="chupai" style="margin-top: 15px">
    <legend>出牌</legend>
    <div id="chupai"></div>
</fieldset>
    <input id="btnChupai" type="button" value="确定出牌"/><input id="btnPass" type="button" value="要不起" style="float: right" />
    <fieldset class="showpai" style="margin-top: 15px">
        <legend>手牌</legend>
        <div id="pais"></div>
    </fieldset>
</body>
</html>
